{% extends "base.html" %}
{% import "airport_macros.html" as airport_tmpl %}
{% block title %}Airports{% endblock %}
{% block scripts %}
<script>
  $(document).ready(function() {
    $('#nav-airports').addClass('active');

    $('#airportform').submit(function(ev) {
      ev.preventDefault();
      var form = $(this);
      $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function() {
            $(form).find('span').fadeIn(200).delay(30000).fadeOut(200);
          }
      });
    });

    $('#addrunway').click(function() {
      $('#runway-fieldset .runway:first').clone(true).appendTo('#runway-fieldset');
    });

    $('.delete-runway').click(function() {
      $(this).parents('.runway').remove()
    });

    $('.runway').find('input:not(input[type=hidden]), select').change(function() {
      var num = $(this).parents('.runway').find('input[name=runway-number]').val();
      var length = $(this).parents('.runway').find('input[name=runway-length]').val();
      var width = $(this).parents('.runway').find('input[name=runway-width]').val();
      var surface = $(this).parents('.runway').find('option:selected').val();
      var encodedRunway = num + ':' + length + ':' + width + ':' + surface;
      $(this).parents('.runway').find('input[type=hidden]').val(encodedRunway);
    });
  });
</script>
{% endblock scripts %}

{% block body %}
<div class="row">
  <div class="col-12">
    <div class="container">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Location</th>
            <th>Latitude/Longitude</th>
          </tr>
        </thead>
        <tbody>
          {% for a in airports %}
          <tr>
            <td>{{ a.key.id() }}</td>
            <td>{{ a.name }}</td>
            <td>{{ a.location }}</td>
            <td>{{ a.latlong }}</td>
            <td>
              {% if next_cursor %}
              <a class="btn btn-default btn-inverse" href="/airports?airport={{ a.key.urlsafe() }}&start={{ next_cursor }}">Edit</a>
              {% else %}
              <a class="btn btn-default btn-inverse" href="/airports?airport={{ a.key.urlsafe() }}">Edit</a>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div><!-- .container -->
  </div><!-- .col-12 -->
</div><!-- .row -->
<div class="row">
  <div class="container">
    <div class="col-12">
    {{ util.pager("/airports", prev_page, next_page, width="col-12") }}
    </div>
  </div>
</div>

{% if airport is defined %}
<div class="row">
  <div class="container well">
    <form class="form-horizontal" action="/airports" method="POST" id="airportform">
      <fieldset>
        <input type="hidden" name="airport" value="{{ airport.key.urlsafe() }}" form="airportform">
        <legend>{{ airport.key.id() }}
          <small>{{ airport.name }}</small>
        </legend>
        <div class="form-group" id="editcontainer">
          <label class="col-lg-1 control-label" for="airportName">Name</label>
          <div class="col-lg-11">
            <input type="text" class="form-control" id="airportName" name="name" value="{{ airport.name if airport.name != None }}">
          </div>
          <label class="col-lg-1 control-label" for="airportLocation">Location</label>
          <div class="col-lg-11">
            <input type="text" class="form-control" id="airportLocation" name="location" value="{{ airport.location if airport.location != None }}">
          </div>
          <label class="col-lg-1 control-label" for="airportLatLong">Lat/Lon</label>
          <div class="col-lg-11">
            <input type="text" class="form-control" id="airportLatLong" name="latlong" value="{{ airport.latlong if airport.latlong != None }}">
          </div>
        </div>
      </fieldset>
      <fieldset id="runway-fieldset">
        {% for runway in airport.runways %}
          {{ airport_tmpl.runway(runway) }}
        {% endfor %}
        {{ airport_tmpl.runway() }}
      </fieldset>
      <div class="form-group pull-left">
        <button type="button" class="btn btn-inverse" id="addrunway">Add Runway</button>
        <button type="submit" class="btn btn-primary" form="airportform">Save</button>
        <span class="help-inline text-success" style="display: none;">Success!</span>
      </div>
    </form>
  </div><!-- .container.well -->
</div><!-- .row -->
{% endif %}
{% endblock body %}
